<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>fileHome</title>

    <script src="../vue/dist/vue.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="../bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="jumbotron">
    <div class="container text-center">
        <h1>bookInfo</h1>
        

    </div>
</div>


<div class="container-fluid" id="bookApp" style="margin:10px auto;width:600px;">


    

    <div class="row">

        
        
       
        <form class="form-horizontal" role="form">
             
            <div class="form-group">
              <label for="firstname" class="col-sm-4 control-label">name</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" name="name" v-model="book.name" >
              </div>
            </div>
            <div class="form-group">
              <label for="lastname" class="col-sm-4 control-label">价格</label>
              <div class="col-sm-8">
                
                
                <input type="number" name="price" v-model="book.price" class="form-control"  required="required" >
                
                
              </div>
            </div>
            
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="button" @click="doSave" class="btn btn-default">保存</button>
              </div>
            </div>
          </form>

       


    </div>

</div>


</body>
</html>

<script>

    var vm = new Vue({
        el: '#bookApp',
        data: {
            book: {}
        },
        methods: {
            
            doSave: function () {

                var _self = this;
                $.ajax({
                    type: "post",
                    url: "/books",
                    data: JSON.stringify(_self.book),
                    contentType: 'application/json;charset=utf-8',
                    dataType: "json",
                    success: function (response) {

                        console.log(response);
                        
                        if(response.code == 0){

                            window.location.href = "/books/home";
                        }

                    }
                });
            }
        },
        mounted: function () {

            // this.all();
        }
    })
</script>